<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Recorido Del Dia</title>
	<?php 
//include_once '/../Api/auxiliar_api.php';
Yii::import('application.core.logica.google.Auxiliar_api');

// direcciones de la lista de pacientes (tiene que se un array)
//$lista_pacientes=$recorrido;
$lista_pacientes=array("rodo 2589, florencio varela, buenos aires","monteaudo 2235, florencio varela, buenos aires","juan baustista alberdi 2725, florencio varela");


$inicio="monteaudo 2589, florencio varela, buenos aires"; // el punto de partida del recorrido (hospital)	
$final="General Belgrano 3625, florencio varela";  // el final del recorrido (la casa)

// -----lo modifico para que lo pueda leer javascrip----
$a=new Auxiliar_api(); // llamo a la Auxiliar de la api para juntar las coordenadas
// $inicio = $a->concatena($inicio);
// $final = $a->concatena($final);
// $lista_pacientes =  $a->coordenadas_juanta_javascript($lista_pacientes);
?>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBfKE6Ncy85in6g8TBk7Umskb1EUzd1oMk&sensor=false">></script>
    <script>

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;

var centrar_mapa = new google.maps.LatLng(-34.774753, -58.266555);

function initialize() {

  var mapOptions = {
    zoom: 13,
    center: centrar_mapa
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  calcRoute();
}

function calcRoute() {
	var selectedMode = document.getElementById('mode').value;

  var request = {
    origin:<?php $a->concatena($inicio);?> ,
    destination:<?php $a->concatena($final);?> ,
    waypoints:[<?php $a->coordenadas_juanta_javascript($lista_pacientes);?>],
    travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000.0;
  document.getElementById('total').innerHTML = total + ' km';
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
  <div id="panel">
  <b>Modo de Trasporte: </b>
  <select id="mode" onchange="calcRoute();">
    <option value="DRIVING">Automovil</option>
    <option value="WALKING">Caminando</option>
  </select>
  </div>
    <div id="map-canvas" style="float:left;width:70%; height:100%"></div>
    <div id="directionsPanel" style="float:right;width:30%;height 100%">
    <p>Total recorrido para hoy: <span id="total"></span></p>
</body>
<?php 

// for ($i=65;$i<=90;$i++) {       ///aca es donde tendriamos que pone los datos para que aparescan arriba 
//   echo chr($i);                 
// }
?>
	</body>
</html>